<template>
	<view class="recommendContainer">
		<!-- 推荐轮播大图 -->
		<swiper class="bannerSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="2000">
			<swiper-item><image class="bannerImg" src="../../static/images/index/1.webp"></image></swiper-item>
			<swiper-item><image class="bannerImg" src="../../static/images/index/2.webp"></image></swiper-item>
			<swiper-item><image class="bannerImg" src="../../static/images/index/3.webp"></image></swiper-item>
		</swiper>
		<!-- policyDescList -->
		<view class="policyDescList">
			<view class="policyDescItem" v-for="item in indexData.policyDescList" :key="item.desc">
				<image class="Img" :src="item.icon" mode=""></image>
				<text>{{ item.desc }}</text>
			</view>
		</view>
		<!-- nav区域 -->
		<view class="nav" v-if="indexData.kingKongModule">
			<view class="navItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.L1Id">
				<image :src="item.picUrl" mode=""></image>
				<view class="navText">{{ item.text }}</view>
			</view>
		</view>
		<!-- 选购指南 -->
		<CategoryList :categoryObj='categoryObj' v-for="(categoryObj,index) in indexData.categoryModule" :key="index"/>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import CategoryList from '../CategoryList/CategoryList.vue';
export default {
	name: 'recommendContainer',
	data() {
		return {};
	},
	components: {
		CategoryList
	},
	computed: {
		...mapState('home', ['indexData'])
	}
};
</script>

<style lang="stylus" scoped>
.recommendContainer
	.bannerSwiper
		.bannerImg
			width 100%
			height 100%
	.policyDescList
		display flex
		justify-content space-around
		.policyDescItem
			.Img
				width 32upx
				height 32upx
				vertical-align middle
			text
				font-size 24upx
				vertical-align middle
	.nav
		display flex
		flex-wrap wrap
		.navItem
			width 20%
			text-align center
			image
				width 110upx
				height 110upx
			.navText
				font-size 24upx
</style>
